<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水泵房系统监控</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        .pump-monitor {
            padding: 20px;
        }

        .param-card {
            margin-bottom: 20px;
        }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .status-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .status-item .icon {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 10px;
        }

        .status-item .label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .status-item .value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }

        .status-item .unit {
            color: #909399;
            font-size: 12px;
        }

        .chart-container {
            height: 400px;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .alarm-list {
            margin-top: 20px;
        }

        .efficiency-analysis {
            padding: 20px;
        }

        .analysis-card {
            margin-bottom: 20px;
        }

        .time-selector {
            margin-bottom: 20px;
        }

        .analysis-chart {
            height: 350px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div id="pump-system">
        <el-tabs v-model="activeTab">
            <!-- 运行监测标签页 -->
            <el-tab-pane label="运行监测" name="monitor">
                <div class="pump-monitor">
                    <!-- 水泵运行状态 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>水泵运行状态</span>
                        </div>
                        <div class="status-grid">
                            <div class="status-item">
                                <i class='bx bx-water icon'></i>
                                <div class="label">1#主水泵</div>
                                <el-tag type="success">正常运行</el-tag>
                                <div class="value">45.2</div>
                                <div class="unit">Hz</div>
                            </div>
                            <div class="status-item">
                                <i class='bx bx-water icon'></i>
                                <div class="label">2#备用水泵</div>
                                <el-tag type="info">待机状态</el-tag>
                                <div class="value">0</div>
                                <div class="unit">Hz</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 进出水压力数据 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>进出水压力数据</span>
                        </div>
                        <div class="status-grid">
                            <div class="status-item">
                                <div class="label">进水压力</div>
                                <div class="value">0.35</div>
                                <div class="unit">MPa</div>
                            </div>
                            <div class="status-item">
                                <div class="label">出水压力</div>
                                <div class="value">0.62</div>
                                <div class="unit">MPa</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 水箱液位信息 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>水箱液位信息</span>
                        </div>
                        <div class="status-grid">
                            <div class="status-item">
                                <div class="label">生活水箱液位</div>
                                <el-progress type="dashboard" :percentage="85"></el-progress>
                                <div class="unit">当前液位：85%</div>
                            </div>
                            <div class="status-item">
                                <div class="label">消防水箱液位</div>
                                <el-progress type="dashboard" :percentage="95"></el-progress>
                                <div class="unit">当前液位：95%</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 机房水浸告警 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>机房水浸告警</span>
                        </div>
                        <el-table :data="waterAlarms" style="width: 100%">
                            <el-table-column prop="location" label="位置"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                                        {{scope.row.status}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="最后检测时间"></el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 运行时间统计 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>运行时间统计</span>
                        </div>
                        <div class="chart-container">
                            <div style="color: #909399; text-align: center; line-height: 400px;">
                                此处显示运行时间统计图表
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>

            <!-- 能效分析标签页 -->
            <el-tab-pane label="能效分析" name="analysis">
                <div class="efficiency-analysis">
                    <!-- 水泵效率分析 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>水泵效率分析</span>
                            <el-radio-group v-model="analysisRange" size="small" style="float: right">
                                <el-radio-button label="day">日</el-radio-button>
                                <el-radio-button label="week">周</el-radio-button>
                                <el-radio-button label="month">月</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示水泵效率分析图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 用水量统计 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>用水量统计</span>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示用水量统计图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 能耗分析 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>能耗分析</span>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示能耗分析图表
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#pump-system',
            data() {
                return {
                    activeTab: 'monitor',
                    analysisRange: 'day',
                    waterAlarms: [
                        { location: '主水泵区域', status: '正常', time: '2024-01-20 15:30:00' },
                        { location: '水箱区域', status: '正常', time: '2024-01-20 15:30:00' },
                        { location: '管道间', status: '正常', time: '2024-01-20 15:30:00' }
                    ]
                }
            }
        })
    </script>
</body>
</html> 